<!-- 投诉管理 -->
<template>
	<main-content>
		<view class="">
			<uni-table border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th v-for="item in tableConfig" :key="item.dataIndex">{{item.title}}</uni-th>
				</uni-tr>
				<template v-if="listData.length > 0">
					<uni-tr v-for="item in listData" :key="item.id" al>
						<uni-td v-for="itemConfig in tableConfig" :key="itemConfig.dataIndex">
							<view class="" v-if="itemConfig.dataIndex=='images' && item[itemConfig.dataIndex]">
								<view class="" v-for="imgSrc in item[itemConfig.dataIndex]" :key="imgSrc">
									<u-image :src="imgUrl[imgSrc]" width="50px" height="50px"></u-image>
								</view>
							</view>
							<view class="w-100" style="word-break:break-all;word-wrap:break-word;" v-else>
								{{
								itemConfig?.customRender ? itemConfig.customRender({item,text:item[itemConfig.dataIndex]}) : item[itemConfig.dataIndex]
							}}
							</view>
						</uni-td>
					</uni-tr>
				</template>
			</uni-table>
		</view>
	</main-content>
</template>
<script setup name='index'>
	import {
		reactive,
		ref,
		getCurrentInstance,
		onMounted,
		computed,
		watch
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app'
	import {
		useCommonStore
	} from '@/stores/common.js'
	import {
		useUserStore
	} from '@/stores/user.js'
	import {
		ALI_ROLE, // 角色类型
	} from '@/common/dict.js'
	import {
		debounce,
		selectDictLabel,
		parseTime
	} from '@/common/common.js'
	const commonStore = useCommonStore()
	const {
		proxy
	} = getCurrentInstance()

	const props = defineProps({
		// 父组件传过来的值
		rowData: {
			type: Object,
			default: () => {},
		},
	})

	const maiColor = computed(() => {
		return proxy.$System.maiColor.value
	})

	const tableConfig = [{
			title: '时间',
			dataIndex: 'gmtCreate',
			customRender: (column) => parseTime(column.text),
		}, {
			title: '角色',
			dataIndex: 'replierRole',
			customRender: ({
				text
			}) => {
				return selectDictLabel(ALI_ROLE, text)
			}
		},
		{
			title: '内容',
			dataIndex: 'content',
		},
		{
			title: '图片',
			dataIndex: 'images',
		},
	]

	const initForm = {

	}
	const queryForm = ref({
		...initForm
	})

	const total = ref(0)
	const listData = ref([])
	// 获取数据列表
	const getList = async (data) => {
		// 统一显示加载框
		uni.showLoading({
			title: '加载中...',
			mask: true
		})

		listData.value = data
		// 隐藏加载框
		uni.hideLoading()
	}

	watch(
		() => props.rowData,
		(newVal) => {
			if (props.rowData) {
				getList(props.rowData)
			}
		}, {
			immediate: true
		},
	)

	onLoad(async (options) => {})
	onReady(() => {
		// paging.value.reload()
	})
</script>
<style lang='scss' scoped>
	.operate-box {
		position: fixed;
		z-index: 99;
		bottom: 50rpx;
	}

	:deep(.zp-paging-container) {
		background-color: #F6F7F9;
	}

	:deep(.u-card .u-card__head) {
		padding: 15px 15px 0 15px !important;
	}

	:deep(.u-card .u-card__foot) {
		/* padding: 0 15px 15px 15px !important; */
	}
</style>